<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			padding: 0px;
			margin: 0px;
		}
		body{
			background: #F1F1F1 url() 0 0 no-repeat;
		}
		.box{
			margin-top: 100px;
			text-align: center;
		}
	</style>
	<script type="text/javascript">
		window.onload= function () {
			item = document.getElementsByClassName('item');

			console.log(item);

			setInterval(run,1000);

			str = "";

			function run() {

				str = "";
				
				now = new Date();

				h = changeType(now.getHours());

				m = changeType(now.getMinutes());

				s = changeType(now.getSeconds());

				console.log(str);

				for (var i = 0; i <item.length; i++) {
					item[i].src="./images/"+str[i]+".png";
				}

				
			}

			function changeType(num) {
				if(num<10){
					str += "0"+num;
				}else{
					str +=num;
				}
			}

		}
	</script>
</head>
<body>
	<div class="box">
		<img src="./images/0.png" alt="" class="item">
		<img src="./images/0.png" alt="" class="item">
		<img src="./images/dian.png" alt="" class="dian">
		<img src="./images/0.png" alt="" class="item">
		<img src="./images/0.png" alt="" class="item">
		<img src="./images/dian.png" alt="" class="dian">
		<img src="./images/0.png" alt="" class="item">
		<img src="./images/0.png" alt="" class="item">
	</div>
</body>
</html>